<template>
  <el-dialog
    :visible.sync="visible"
    :title="edit ? '修改vps' : 'vps详情'"
    width="520px"
    @close="handleClose"
    append-to-body
    class="light-dialog"
  >
    <el-form :model="form" label-width="100px" label-position="left" size="small" class="light-form">
      <el-form-item label="用户名">
        <el-input v-model="form.userName" :disabled="!edit" clearable></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="form.password" :disabled="!edit" clearable></el-input>
      </el-form-item>
      <el-form-item label="城市名">
        <el-input v-model="form.cityName" :disabled="!edit" clearable></el-input>
      </el-form-item>
      <el-form-item label="国家名">
        <el-input v-model="form.countryName" :disabled="!edit" clearable></el-input>
      </el-form-item>
      <el-form-item label="起始时间">
        <el-date-picker
          v-model="form.createTime"
          type="datetime"
          placeholder="选择起始时间"
          :disabled="!edit"
          value-format="yyyy-MM-dd HH:mm:ss"
          style="width: 100%;"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="到期时间">
        <el-date-picker
          v-model="form.endTime"
          type="datetime"
          placeholder="选择到期时间"
          :disabled="!edit"
          value-format="yyyy-MM-dd HH:mm:ss"
          style="width: 100%;"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="操作系统">
        <el-input v-model="form.operSystem" :disabled="!edit" clearable></el-input>
      </el-form-item>
      <el-form-item label="IP地址">
        <el-input v-model="form.ipAddress" :disabled="!edit" clearable></el-input>
      </el-form-item>
      <el-form-item label="端口">
        <el-input v-model="form.portNum" :disabled="!edit" clearable></el-input>
      </el-form-item>
      <el-form-item label="内存大小">
        <el-input v-model="form.memorySize" :disabled="!edit" clearable></el-input>
      </el-form-item>
      <el-form-item label="节点名">
        <el-input v-model="form.nodeName" :disabled="!edit" clearable></el-input>
      </el-form-item>
      <el-form-item label="节点类型">
        <el-input v-model="form.nodeType" :disabled="!edit" clearable></el-input>
      </el-form-item>
      <el-form-item label="是否过期">
        <el-select v-model="form.isOverdue" :disabled="!edit" placeholder="请选择">
          <el-option label="是" :value="1"></el-option>
          <el-option label="否" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="服务名称">
        <el-input v-model="form.serviceName" :disabled="!edit" clearable></el-input>
      </el-form-item>
      <el-form-item label="节点状态">
        <el-select v-model="form.nodeStatus" :disabled="!edit" placeholder="请选择">
          <el-option label="是" :value="1"></el-option>
          <el-option label="否" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="带宽">
        <el-input v-model="form.bandWidth" :disabled="!edit" clearable></el-input>
      </el-form-item>
      <el-form-item label="备注信息">
        <el-input v-model="form.remark" :disabled="!edit" type="textarea" clearable></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">关闭</el-button>
      <el-button v-if="edit" type="primary" @click="handleSave">保存</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: "Modify",
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    city: {
      type: Object,
      default: () => ({})
    },
    edit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: { ...this.city }
    };
  },
  watch: {
    city: {
      immediate: true,
      handler(val) {
        this.form = { ...val };
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit("update:visible", false);
    },
    handleSave() {
      // 通知父组件更新并传递数据
      this.$emit("update", { ...this.form });
      // 不在这里关闭弹窗，由父组件控制
    }
  }
};
</script>

<style scoped>
.light-dialog ::v-deep .el-dialog__header,
.light-dialog ::v-deep .el-dialog__body,
.light-dialog ::v-deep .el-dialog__footer {
  background: #f8fafc;
  color: #232526;
  border: 1.5px solid #b3c6e8;
  border-radius: 16px;
}
.light-dialog ::v-deep .el-dialog {
  border: 1.5px solid #b3c6e8;
  border-radius: 16px;
  background: #f8fafc;
}
.light-dialog ::v-deep .el-dialog__title {
  color: #409eff !important;
  font-weight: bold;
  letter-spacing: 1px;
}
.light-form ::v-deep .el-form-item__label {
  color: #409eff !important;
  font-size: 15px;
  font-weight: 500;
}
.light-form ::v-deep .el-input__inner {
  background: #fff;
  color: #232526;
  border: 1px solid #b3c6e8;
  border-radius: 8px;
  font-size: 15px;
}
.light-form ::v-deep .el-input__inner:focus {
  border-color: #409eff;
  background: #f3f6fa;
}
.light-form ::v-deep .el-select .el-input__inner {
  cursor: pointer;
}
.dialog-footer .el-button {
  border-radius: 8px;
  font-size: 16px;
  height: 40px;
  background: #e9f0fb;
  border: none;
  color: #409eff;
  font-weight: 500;
}
.dialog-footer .el-button--primary {
  background: #409eff;
  color: #fff;
}
.dialog-footer .el-button:hover,
.dialog-footer .el-button--primary:hover {
  background: #b3c6e8;
  color: #fff;
}
</style>
